<template>
    <div class="sdy-home-nar">
        <van-swipe class="swiper-nar" indicator-color="red">
            <van-swipe-item>
                <van-grid :column-num="5" :gutter="5" :border="false">
                    <van-grid-item v-for="item in navs" :key="item.id" :icon="item.img" :text="item.title" />
                </van-grid>
            </van-swipe-item>
            <van-swipe-item>
                <van-grid :column-num="5" :gutter="5" :border="false">
                    <van-grid-item v-for="item in navs" :key="item.id" icon="photo-o" :text="item.title" />
                </van-grid>
            </van-swipe-item>
        </van-swipe>
    </div>
</template>
  
<script setup lang="ts">
const navs = [
    { id: 1, title: '啥都有超', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png' },
    { id: 2, title: '啥都有超', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png' },
    { id: 3, title: '啥都有超', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png' },
    { id: 4, title: '啥都有超', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png' },
    { id: 5, title: '啥都有超', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png' },
    { id: 6, title: '啥都有超', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png' },
    { id: 7, title: '啥都有超', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png' },
    { id: 8, title: '啥都有超', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png' },
    { id: 9, title: '啥都有超', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png' },
    { id: 10, title: '啥都有超', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png' },
]
</script>
  
<style scoped lang="scss">
@import '@/styles/variable.scss';

.sdy-home-nar {
    height: 210px;
    box-sizing: border-box;
    padding: 15px;

    >.swiper-nar {
        height: 100%;
    }
}
</style>